<template>
  <div class="main">
    <h1 class="title">UPLOAD</h1>
    <div class="img"></div>
    <form
      action="http://localhost:8181/node/upload"
      method="post"
      enctype="multipart/form-data"
      target="iframe_display"
    >
      <input
        class="in"
        type="text"
        id="name"
        name="nodename"
        v-model="nodeMsg.nodeName"
        placeholder="笔记名"
      />
      <select class="in" name="language" v-model="nodeMsg.language">
        <option value="none" selected disabled hidden>语言</option>
        <option
          v-for="item in selectList.language"
          :key="item.id"
          :value="item.value"
        >
          {{ item.text }}
        </option>
      </select>
      <select class="in" name="className" v-model="nodeMsg.className">
        <option value="none" selected disabled hidden>类别</option>
        <option
          v-for="item in selectList.className"
          :key="item.id"
          :value="item.value"
        >
          {{ item.text }}
        </option>
      </select>
      <div class="file">
        点击上传文件
        <input
          type="file"
          id="file"
          name="file"
          ref="uploadInput"
          multiple="multiple"
          @change="upload"
        />
      </div>
      <p>DISCRIPTION</p>
      <textarea
        name="description"
        rows="10"
        cols="10"
        placeholder="写一些对该笔记的描述吧"
      ></textarea>
      <input class="in" type="submit" value="SUBMIT" @click="check($event)"/>
    </form>
    <iframe
      name="iframe_display"
      style="display: none"
      frameborder="0"
    ></iframe>
  </div>
</template>
<script>
// 引入Cookie工具
import { getCookie } from "@/tool/ToolCookie";
export default {
  data() {
    return {
      // 用户上传笔记的信息
      nodeMsg: {
        nodeName: "",
        language: "none",
        className: "none",
      },
      // 笔记信息选项
      selectList: {
        language: [
          { id: 1, value: "Java", text: "Java" },
          { id: 2, value: "Python", text: "Python" },
          { id: 3, value: "HTML", text: "HTML" },
          { id: 4, value: "CSS", text: "CSS" },
          { id: 5, value: "JavaScript", text: "JavaScript" },
          { id: 6, value: "Ruby", text: "Ruby" },
          { id: 7, value: "Go", text: "Go" },
          { id: 8, value: "XML", text: "XML" },
          { id: 9, value: "Android", text: "Android" },
          { id: 10, value: "Redis", text: "Redis" },
          { id: 11, value: "MySQL", text: "MySQL" },
          { id: 12, value: "Maven", text: "Maven" },
          { id: 13, value: "C++", text: "C++" },
          { id: 14, value: "C", text: "C" },
          { id: 15, value: "JSP", text: "JSP" },
          { id: 16, value: "PHP", text: "PHP" },
          { id: 17, value: "other", text: "其他" },
        ],
        className: [
          { id: 1, value: "Study", text: "学习笔记类" },
          { id: 2, value: "Source", text: "项目源码类" },
          { id: 3, value: "Bug", text: "BUG解决类" },
          { id: 4, value: "Curriculum", text: "课程系列类" },
          { id: 5, value: "Function", text: "功能实现类" },
          { id: 6, value: "other", text: "其他" },
        ],
      },
      // 是否上传文件
      fileUpload:false,
    };
  },
  methods: {
    // 上传文件判断，不能上传除了md和txt的文件
    upload() {
      let files = this.$refs.uploadInput.files;
      let AllUpExt = ".md|.txt",
        // 转为小写
        extName = files[0].name
          .substring(files[0].name.lastIndexOf("."))
          .toLowerCase();
      if (AllUpExt.indexOf(extName + "|") == "-1") {
        alert("文件格式不正确,请上传markdown文件(.md文件)!");
        this.$refs.uploadInput.value = "";
        return false;
      }
      // 修改文件标志位
      this.fileUpload = true
    },
    // 上传笔记数据检查，看是否有没填的信息
    async check(event) {
      // 判断是否有没填的笔记信息，用户是否登录
      if (getCookie("userId") == null) {
        alert("请先登录后再上传笔记");
        event.preventDefault();
        return false
      }
      if (
        this.nodeMsg.className == "none" ||
        this.nodeMsg.language == "none" ||
        this.nodeMsg.nodeName == "" 
      ) {
        alert("请将信息填写完整！");
        event.preventDefault();
        return false;
      }
      if(!this.fileUpload) {
        alert("请选择上传的文件")
        event.preventDefault();
        return false
      }
      // 发送请求，判断数据库中是否有同名的笔记
      let nodeNameCheck = false
      await this.$axios({
        method: "post",
        url:
          "http://localhost:8181/node/findNodeByName/" +
          this.nodeMsg.nodeName +
          "/" +
          getCookie("userId"),
      }).then(
        (res) => {
          if (res.data) nodeNameCheck = true;
        },
        (err) => {
          console.log(err);
        }
      );
      if(nodeNameCheck) {
        alert("您已经有一篇同名笔记，请更改笔记名")
        event.preventDefault(); // 无法阻止提交！不知道为什么
        return false;
      }
      alert("笔记上传成功");
      return true;
    },
  },
};
</script>

<style scoped>
.main {
  overflow: hidden;
  height: 460px;
  transition: all 0.5s;
}
.title {
  color: #fff;
  display: block;
  text-align: center;
  margin-top: 10px;
  transition: all 0.5s;
}

.img {
  border-radius: 30px;
  width: 600px;
  height: 380px;
  top: 70px;
  left: 70px;
  position: absolute;
  background: url("@/assets/upload.png") no-repeat;
  background-size: cover;
  background-color: #20202a;
  transition: all 0.5s;
}

.main input,
.main select,
.file {
  background-color: #20202a;
  border: #2b2f3b 3px solid;
  border-radius: 30px;
  display: block;
  text-align: center;
  position: absolute;
  height: 30px;
  width: 25%;
  color: #fff;
  outline: none;
  right: -200px;
  transition: all 0.3s;
}

.main input[type="text"] {
  top: 120px;
}

.main select[name="className"] {
  top: 170px;
}

.main select[name="language"] {
  height: 30px;
  width: 25%;
  top: 220px;
}

.main input[type="file"] {
  width: 100%;
  top: 0;
  right: 0;
  opacity: 0;
  z-index: 100;
  cursor: pointer;
}

.file {
  top: 270px;
  text-align: center;
  font-weight: normal;
  font-size: small;
  line-height: 30px;
  cursor: pointer;
}

.main input[type="submit"] {
  top: 320px;
  cursor: pointer;
  font-weight: 900;
  right: 280px;
  height: 60px;
  border-color: #2ecc71;
}

textarea {
  display: block;
  position: absolute;
  top: 460px;
  left: 65px;
  margin: 0 auto;
  width: 600px;
  height: 120px;
  background-color: #20202a;
  border: #2b2f3b 5px solid;
  border-radius: 20px;
  text-align: center;
  font-size: xx-large;
  font-weight: 900;
  outline: none;
  color: #fff;
  resize: none;
}
/* 鼠标进入主模块动画 */

.main input:hover,
.main select:hover,
.main input:focus,
.main select:focus,
textarea:focus,
textarea:hover,
.file:hover,
.file:focus {
  border-color: #2ecc71;
}

.main input[type="submit"]:hover {
  background-color: #2ecc71;
}
.main:hover,
textarea:focus .main {
  height: 610px;
}
p {
  font-size: 30px;
  color: #fff;
  position: absolute;
  top: 420px;
  left: -190px;
  transition: all 0.5s;
}
.main:hover p {
  left: 275px;
}

.main:hover .img {
  width: 65%;
  height: 300px;
  left: 10px;
  top: 120px;
}

.main:hover .in,
.main:hover .file {
  right: 50px;
}

.main:hover .title {
  font-size: 90px;
}
</style>